<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS倒计时</title>
    <style>
        body,
        div,
        p,
        span,
        img,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        body {
            background-color: black;
        }

        .container {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 150px auto;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
        }

        p {
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            margin-top: -40px;
        }

        .item-box {
            width: 480px;
            height: 120px;
            margin: 140px auto;
        }

        .item {
            width: 65px;
            height: 120px;
            float: left;
            overflow: hidden;
            position: relative;
        }

        .item ul li {
            width: 65px;
            height: 120px;
        }

        span {
            width: 30px;
            line-height: 120px;
            text-align: center;
            float: left;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>距离活动结束时间：</p>
        <div class="item-box">
            <div class="item">
                <ul>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
            </div>
            <div class="item">
                <ul>
                    <li><img src="./images/3.png" alt=""></li>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
                </ul>
            </div>
            <span class="hour">时</span>
            <div class="item">
                <ul>
                    <li> <img src="./images/5.png" alt=""></li>
                    <li> <img src="./images/4.png" alt=""></li>
                    <li> <img src="./images/3.png" alt=""></li>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li> <img src="./images/9.png" alt=""></li>
                    <li> <img src="./images/8.png" alt=""></li>
                    <li> <img src="./images/7.png" alt=""></li>
                    <li> <img src="./images/6.png" alt=""></li>
                    <li> <img src="./images/5.png" alt=""></li>
                    <li> <img src="./images/4.png" alt=""></li>
                    <li> <img src="./images/3.png" alt=""></li>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
                </ul>
            </div>
            <span class="minit">分</span>
            <div class="item">
                <ul>
                    <li> <img src="./images/5.png" alt=""></li>
                    <li> <img src="./images/4.png" alt=""></li>
                    <li> <img src="./images/3.png" alt=""></li>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li> <img src="./images/9.png" alt=""></li>
                    <li> <img src="./images/8.png" alt=""></li>
                    <li> <img src="./images/7.png" alt=""></li>
                    <li> <img src="./images/6.png" alt=""></li>
                    <li> <img src="./images/5.png" alt=""></li>
                    <li> <img src="./images/4.png" alt=""></li>
                    <li> <img src="./images/3.png" alt=""></li>
                    <li> <img src="./images/2.png" alt=""></li>
                    <li> <img src="./images/1.png" alt=""></li>
                    <li> <img src="./images/0.png" alt=""></li>
                </ul>
            </div>
            <span class="second">秒</span>
        </div>
    </div>
    <script>
        var itemBox = document.querySelector(".item-box");
        var ul8 = itemBox.querySelector(".item:nth-child(8) ul");
        var ul7 = itemBox.querySelector(".item:nth-child(7) ul");

        var ul5 = itemBox.querySelector(".item:nth-child(5) ul");
        var ul4 = itemBox.querySelector(".item:nth-child(4) ul");

        var ul2 = itemBox.querySelector(".item:nth-child(2) ul");
        var ul1 = itemBox.querySelector(".item:nth-child(1) ul");
        function changeTimeNumber(node, duration) {
            setInterval(() => {
                const firstChild = node.querySelector('li:first-child')
                node.style.transition = 'all .5s linear'
                node.style.marginTop = '-120px'
                /* 定义动画执行完成时间 */
                node.addEventListener('transitionend', function () {
                    /* 改变动画的执行transition属性 为空 */
                    node.style.transition = 'none'
                    /* 定义marginTop值为0 */
                    node.style.marginTop = '0px';
                    /* 追加第一个元素准备进行第二次动画 */
                    node.appendChild(firstChild)
                })
                // ul8.style.marginTop = marginTop + 'px';
            }, duration);
        }

        changeTimeNumber(ul8, 1000);// 1s一次
        changeTimeNumber(ul7, 10000);// 10s一次
        changeTimeNumber(ul5, 60000);// 1min=60s一次
        changeTimeNumber(ul5, 600000);// 10min=600s一次
        changeTimeNumber(ul4, 3600000);// 1h=60min=3600s一次
        changeTimeNumber(ul2, 10800000);//3h
    </script>
</body>

</html>